// 1. React核心库
import React, { useEffect } from 'react';

// 2. UI组件库
import { Form, Input, Switch, Button, Space } from 'antd';

// 3. 图标库
import { UserOutlined, MailOutlined, LockOutlined } from '@ant-design/icons';

// 4. 专业组件库
import { ProForm, ProFormText, ProFormSwitch } from '@ant-design/pro-components';

// 7. 生成的类型定义
import type { UserProfile, UserCreateRequest, UserUpdateRequest } from '@/services/generated/src';

interface UserFormProps {
  initialValues?: Partial<UserProfile>;
  onFinish: (values: UserCreateRequest | UserUpdateRequest) => Promise<void>;
  loading?: boolean;
  isEdit?: boolean;
  showPassword?: boolean;
}

const UserForm: React.FC<UserFormProps> = ({
  initialValues,
  onFinish,
  loading = false,
  isEdit = false,
  showPassword = true,
}) => {
  const [form] = Form.useForm();

  useEffect(() => {
    if (initialValues) {
      form.setFieldsValue(initialValues);
    }
  }, [initialValues, form]);

  const handleFinish = async (values: any) => {
    await onFinish(values);
  };

  return (
    <ProForm
      form={form}
      layout="vertical"
      onFinish={handleFinish}
      submitter={{
        render: (props) => (
          <Space>
            <Button onClick={() => window.history.back()}>
              取消
            </Button>
            <Button
              type="primary"
              loading={loading}
              onClick={() => props.form?.submit?.()}
            >
              {isEdit ? '更新' : '创建'}
            </Button>
          </Space>
        ),
      }}
    >
      <ProFormText
        name="username"
        label="用户名"
        placeholder="请输入用户名"
        fieldProps={{
          prefix: <UserOutlined />,
        }}
        rules={[
          { required: true, message: '请输入用户名' },
          { min: 3, message: '用户名至少3个字符' },
          { max: 150, message: '用户名最多150个字符' },
        ]}
        disabled={isEdit}
      />

      <ProFormText
        name="email"
        label="邮箱"
        placeholder="请输入邮箱地址"
        fieldProps={{
          prefix: <MailOutlined />,
        }}
        rules={[
          { required: true, message: '请输入邮箱地址' },
          { type: 'email', message: '请输入有效的邮箱地址' },
        ]}
      />

      <ProFormText
        name="first_name"
        label="名字"
        placeholder="请输入名字"
        rules={[
          { required: true, message: '请输入名字' },
          { max: 150, message: '名字最多150个字符' },
        ]}
      />

      <ProFormText
        name="last_name"
        label="姓氏"
        placeholder="请输入姓氏"
        rules={[
          { required: true, message: '请输入姓氏' },
          { max: 150, message: '姓氏最多150个字符' },
        ]}
      />

      {showPassword && !isEdit && (
        <>
          <ProFormText.Password
            name="password"
            label="密码"
            placeholder="请输入密码"
            fieldProps={{
              prefix: <LockOutlined />,
            }}
            rules={[
              { required: true, message: '请输入密码' },
              { min: 8, message: '密码至少8个字符' },
            ]}
          />

          <ProFormText.Password
            name="password_confirm"
            label="确认密码"
            placeholder="请再次输入密码"
            fieldProps={{
              prefix: <LockOutlined />,
            }}
            rules={[
              { required: true, message: '请确认密码' },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue('password') === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error('两次输入的密码不一致'));
                },
              }),
            ]}
          />
        </>
      )}

      <ProFormSwitch
        name="is_active"
        label="账户状态"
        checkedChildren="激活"
        unCheckedChildren="禁用"
        initialValue={true}
      />

      <ProFormSwitch
        name="is_staff"
        label="管理员权限"
        checkedChildren="是"
        unCheckedChildren="否"
        initialValue={false}
      />
    </ProForm>
  );
};

export default UserForm;
